<template>
  <div
    class="header es-navbar es-navbar-expand-lg es-navbar-light back-light"
    :class="isFixed ? 'fixed' : ''"
    :style="
      isFixed
        ? { transform: 'translateY(56px)', transition: 'transform 1s' }
        : {}
    "
  >
    <div
      class="col-md-2"
      :class="screenWidth <= 912 && !isPC ? 'col-md-12' : ''"
      style="display: flex; justify-content: inherit"
    >
      <a href="" class="es-navbar-brand header_logo">LOGO</a>
      <button class="es-navbar-toggler" type="button" @click="collapseHandle">
        <span class="es-iconfont icon-menu"></span>
      </button>
    </div>
    <div
      class="col-md-10"
      :class="screenWidth <= 912 && !isPC ? 'col-md-0' : ''"
    >
      <div
        class="es-navbar-collapse"
        v-show="!isCollapse"
        :class="!isCollapse && screenWidth <= 912 ? 'collapse' : ''"
      >
        <div class="es-navbar-nav">
          <router-link
            :to="
              isLogin ? item.path : item.path === '/me' ? '/login' : item.path
            "
            v-for="(item, index) in routes"
            :key="index"
            class="es-nav-item es-nav-link"
            :class="$route.path === item.path ? 'on active' : ''"
          >
            <div v-if="item.path !== '/me'">{{ item.name }}</div>
            <div v-else>
              <span
                class="avatar-item es-avatar es-avatar-large es-avatar-square"
                v-if="isLogin"
              >
                <i class="es-avatar-image">
                  <img
                    src="https://booking.webestica.com/assets/images/avatar/01.jpg"
                  />
                </i>
                <span class="es-badge es-badge-primary">
                  {{ msgCount }}
                </span>
              </span>
              <span class="avatar-item" v-if="isLogin">{{ item.name }}</span>
              <span v-if="!isLogin">Sign In</span>
            </div>
          </router-link>
          <router-link
            to="/register"
            class="es-nav-item es-nav-link"
            v-if="!isLogin"
          >
            <span class="sign_up">Sign Up</span>
          </router-link>
          <a
            href="javascript:;"
            class="es-nav-item es-nav-link"
            v-if="isLogin"
            @click="signOutHandle"
          >
            <span>Sign Out</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { routes } from "../../../router";
import { isPC } from "../../../utils";

export default {
  name: "Header",
  props: {
    isFixed: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  data() {
    return {
      routes,
      timeout: null,
      isCollapse: true,
      screenWidth: screen.width,
      msgCount: 30,
      isLogin: false,
      isPC: isPC(),
    };
  },
  created() {
    const token = localStorage.getItem("token");
    this.isLogin = token ? true : false;
    this.screenWidth = screen.width;
    window.addEventListener("DOMContentLoaded", this.screenHandle);
    window.addEventListener("resize", this.screenHandle);
    window.addEventListener("pageshow", this.screenHandle);
    const head = document.querySelector("title");
    head.innerHTML =
      (this.$route.meta && this.$route.meta.title) || this.$route.name;
  },
  mounted() {
    window.scrollTo(1, 1);
  },
  beforeDestroy() {
    window.removeEventListener("DOMContentLoaded", this.screenHandle);
    window.removeEventListener("resize", this.screenHandle);
    window.removeEventListener("pageshow", this.screenHandle);
  },
  methods: {
    screenHandle(e) {
      this.screenWidth = screen.width;
      if (this.screenWidth <= 912) {
        this.isCollapse = true;
      } else {
        this.isCollapse = false;
      }
      if (e.persisted) {
        this.screenHandle(e);
      }
    },
    collapseHandle() {
      this.isCollapse = this.isCollapse ? false : true;
    },
    signOutHandle() {
      localStorage.removeItem("token");
      this.$route.path !== "/" ? this.$router.push("/") : location.reload();
    },
  },
};
</script>

<style lang="scss">
.fixed {
  position: fixed;
  top: -56px;
  left: 0;
  right: 0;
  z-index: 99998;
  /* transition: top 2s ease-in-out 0.3s; */
  backdrop-filter: blur(6px);
  background-color: rgba(255, 255, 255, 0.8) !important;
}
.header {
  display: flex;
  height: 56px;
  /* justify-content: center; */
  align-items: center;
  z-index: 99998;
  .es-navbar-collapse {
    justify-content: end;
    .es-navbar-nav {
      a {
        line-height: 40px;
        span.sign_up {
          border: 1px #cccccc solid;
          border-radius: 4px;
          padding: 6px 12px;
        }
      }
    }
    &.collapse {
      position: fixed;
      top: 56px;
      left: 0;
      right: 0;
      z-index: 99998;
      background-color: var(--light) !important;
    }
  }
  .es-navbar-toggler {
    line-height: inherit;
  }

  a {
    margin: 0 5px;
    padding: 6px 12px;
    &.header_logo {
      margin-right: 20px;
      color: var(--purple);
    }
    &.on {
      font-weight: 700;
    }
    .avatar-item {
      margin: 0 5px;
    }
  }
}
</style>
